<template>
  <view>
    <view class="flex flex-direction align-stretch benben-flex-layout footprint_flex_1">
      <view class="flex flex-direction align-stretch" v-for="(item, i) in goodsList" :key="i">
        <view class="footprint_fd1_0_c0" @click="handleItemAllSelect(item)">
          <text v-if="isEditor" :class="{ checked_icon: true, checked_active: isItemAllSelect(item) }"
            class="fu-iconfont2">
            {{ isItemAllSelect(item) ? '&#59463;' : '&#59221;' }}
          </text>
          <text style="padding-left: 15rpx">{{ item.lanriqi || '暂无日期' }}</text>
        </view>
        <view class="align-center">
          <view @click="handleItem(val)" class="flex flex-direction align-stretch footprint_fd1_0_c1_c0"
            v-for="(val, j) in item.trackList" :key="j">
            <view class="flex align-center" style="width: 750rpx;position: relative;">
              <text v-if="isEditor" :class="{ checked_icon: true, checked_active: val.isSelected }"
                class="fu-iconfont2 myCollection_fd2_0_c0_c0">
                {{ val.isSelected ? '&#59463;' : '&#59221;' }}
              </text>
              <view style="width: 710rpx;margin:0 auto;" @tap.stop="handleJumpDiy" data-type="navigateTo"
                :data-url="`/pages/grzx/fabuxiangqing/fabuxiangqing?id=${val.userpost_id}`">

                <view class='flex flex-direction  align-stretch flex-sub home_fd3_0' v-if="val.userType =='0'">
                  <view class='flex flex-direction flex-wrap align-stretch home_fd3_0_c0'>
                    <view class='flex flex-wrap align-center justify-between flex-sub'>
                      <view class='flex flex-wrap align-center'>
                        <image class='home_fd3_0_c0_c0_c0_c0' mode="aspectFill" v-if="val.is_top"
                          :src='STATIC_URL+"164.png"'></image>
                        <text class='home_fd3_0_c0_c0_c0_c1'>{{val.zhiweimiaoshu}}</text>
                      </view>
                      <view class='flex flex-wrap align-center'>
                        <image class='home_fd3_0_c0_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"150.png"'></image>
                        <text class='home_fd3_0_c0_c0_c1_c1'>{{val.views}}</text>
                      </view>
                    </view>
                    <view class='flex flex-wrap align-center home_fd3_0_c0_c1'>
                      <view class='flex flex-wrap align-center home_fd3_0_c0_c1_c0'>
                        <text style="color: #fff;">{{val.work_nature_name}}</text>
                      </view>
                      <view class='flex flex-wrap align-center home_fd3_0_c0_c1_c1'
                        v-for="(itemA,indexA) in val.postcate_name" :key="itemA">
                        <text>{{itemA}}</text>
                      </view>
                      <!-- <view class='flex flex-wrap align-center home_fd3_0_c0_c1_c1'>
                        <text>建筑相关</text>
                      </view> -->
                    </view>
                    <text class='home_fd3_0_c0_c2'>工作地点：{{val.workplace_name}}</text>
                    <view class='flex flex-wrap align-center justify-between home_fd3_0_c0_c3'>
                      <view class='flex flex-wrap align-center home_fd3_0_c0_c3_c0'>
                        <image class='home_fd3_0_c0_c3_c0_c0' mode="aspectFill" :src='val.avatar'></image>
                        <text>{{val.user_nickname}}</text>
                      </view>
                      <text class='home_fd3_0_c0_c0_c1_c1'>{{val.gongsimingcheng}}</text>
                    </view>
                  </view>
                </view>
                <view class="flex flex-direction align-stretch benben-flex-layout" v-if="val.userType =='1'">
                  <view class='flex flex-direction flex-wrap align-stretch home_fd4_0'>
                    <view class='flex flex-wrap align-center justify-between flex-sub'>
                      <view class='flex flex-wrap align-center home_fd4_0_c0_c0'>
                        <view class='flex flex-wrap align-center home_fd4_0_c0_c0_c0'>
                          <image class='home_fd4_0_c0_c0_c0_c0' mode="aspectFill" :src='val.avatar'>
                          </image>
                          <image class='home_fd4_0_c0_c0_c0_c1' mode="aspectFill" v-if="val.is_top==1"
                            :src='STATIC_URL+"157.png"'></image>
                        </view>
                        <text>{{val.user_nickname}}</text>
                      </view>
                      <view class='flex flex-wrap align-center'>
                        <image class='home_fd4_0_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"150.png"'></image>
                        <text class='home_fd4_0_c0_c1_c1'>{{val.views}}</text>
                      </view>
                    </view>
                    <view class='flex flex-wrap align-center home_fd4_0_c1'>
                      <!-- <text class='home_fd4_0_c1_c0'>{{val.work_nature_name}}</text> -->
                      <text class='home_fd4_0_c1_c0' v-for="(itemA,indexA) in val.postcate_name"
                        :key="itemA">{{itemA}}</text>
                    </view>
                    <text class='home_fd4_0_c2' v-if="val.gerenjianjie">{{val.gerenjianjie}}</text>
                    <text class='home_fd4_0_c3'>期望工作地：{{val.workplace_name}}</text>
                  </view>
                </view>

              </view>
            </view>

            <!--  @tap.stop="handleJumpDiy"
                data-type="navigateTo" :data-url="`/pages/grzx/fabuxiangqing/fabuxiangqing`" -->

          </view>
        </view>
      </view>
      <benben-empty :list-data="goodsList"></benben-empty>
    </view>
    <!---flex布局flex布局结束-->
    <view class="flex flex-direction align-stretch benben-position-layout flex myCollection_flex_3" v-if="isEditor">
      <view class="flex align-center justify-between flex-sub myCollection_fd3_0">
        <view class="flex flex-wrap align-center">
          <view class="flex flex position-relative align-center" @click="isAllSelect = !isAllSelect">
            <text v-if="isEditor" :class="{ checked_icon: true, checked_active: isAllSelect }" class="fu-iconfont2">
              {{ isAllSelect ? '&#59463;' : '&#59221;' }}
            </text>
            <text class="myCollection_fd3_0_c0_c1">{{ $t('全选') }}</text>
          </view>
        </view>
        <button class="myCollection_fd3_0_c1" @tap.stop="getdeleteCollect()">{{ $t('删除') }}</button>
      </view>
    </view>
    <view :style="{ height: '100rpx' }" v-if="isEditor"></view>
  </view>
</template>

<script>
  export default {
    name: 'benben-goods-footprint',
    props: {
      // 商品列表
      goodsList: {
        type: Array,
        default: () => [],
      },
      goodsId: {
        type: [String, Number],
        default: '',
      },
      value: {
        type: [String],
        default: '',
      },
      isEditor: {
        type: Boolean,
        default: false,
      },
      timeFormat: {
        type: [String, Number],
        default: `MM ${global.i18n.t('月')} DD ${global.i18n.t('日')}`,
      },
      priceBefore: {
        type: [String, Number],
        default: '',
      },
      priceAfter: {
        type: [String, Number],
        default: '',
      },
    },
    data() {
      return {}
    },
    computed: {
      isAllSelect: {
        get() {
          let flag = true
          this.goodsList.map((item) => {
            let _val = item.trackList.find((val) => !val.isSelected)
            if (_val) {
              flag = false
            }
          })
          return flag
        },
        set(value) {
          this.goodsList.forEach((item) => {
            item.trackList.forEach((val) => {
              this.$set(val, 'isSelected', value)
            })
          })
        },
      },
    },
    watch: {
      isEditor(val) {
        if (val) this.goodsList.forEach((item) => item.trackList.forEach((val) => this.$set(val, 'isSelected', false)))
      },
    },
    created() {
      console.log('dataList', this.goodsList)
    },
    methods: {
      isItemAllSelect(item) {
        let val = item.trackList.find((val) => !val.isSelected)
        return val ? false : true
      },
      handleItemAllSelect(item) {
        if (!this.isEditor) return
        let flag = !this.isItemAllSelect(item)
        item.trackList.forEach((val) => {
          this.$set(val, 'isSelected', flag)
        })
      },

      handleItem(item) {
        if (this.isEditor) {
          this.$set(item, 'isSelected', !item.isSelected)
        } else {
          this.$emit('update:goods-id', item.goods_id)
          this.$emit('handleGoods')
        }
      },
      //删除收藏
      getdeleteCollect() {
        let aids = []
        this.goodsList.map((item) => {
          item.trackList.map((val) => {
            if (val.isSelected) {
              aids.push(val.aid)
            }
          })
        })
        if (!aids.length) return this.$message.info(global.i18n.t('请选择'))
        this.$emit('input', aids.join(','))
        this.$emit('handleDel')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .home_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .home_fd0_0_c2_c1 {
    width: 40rpx;
    height: 40rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .home_fd0_0_c2_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .home_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .home_fd0_0_c0 {
    width: 120rpx;
  }

  .home_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .home_numberfd1_0_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .home_fd1_0_c2 {
    background: var(--benbenbgColor1);
    background-size: 100% auto;
    height: 340rpx;
  }

  .home_fd1_0_c2_c0 {
    width: 100%;
    height: 100%;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .home_fd1_0_c1 {
    width: 750rpx;
    height: 500rpx;
  }

  .home_fd1_0_c1_c0 {
    width: 750rpx;
    height: 340rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .home_fd1_0 {
    width: 750rpx;
    height: 340rpx;
  }

  .home_swiperDotUnselectedfd1_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .home_swiperDotSelectedfd1_0 {
    border: 1px solid #00A7FF;
    background: #00A7FF;
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .home_swiperDotfd1_0 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .home_flex_2 {
    background: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 88rpx;
    background-size: 100% auto !important;
  }

  .home_fd2_0_c0_c1_c0_c1 {
    width: 24rpx;
    height: 24rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 10rpx;
  }

  .home_fd2_0_c0_c1_c0_c0_1 {
    color: rgba(255, 114, 13, 1);
    font-size: 26rpx;
    font-weight: 400;
    line-height: 26rpx;
  }

  .home_fd2_0_c0_c0_c4_c0_c1_c0_c1 {
    background: rgba(244, 244, 244, 1);
    margin: 15rpx 10rpx 15rpx 10rpx;
    width: 152rpx;
    height: 70rpx;
    border-radius: 10rpx;
    background-size: 100% auto !important;
  }

  .home_fd2_0_c0_c0_c4_c0_c1_c0_c0 {
    border: 1px solid rgba(255, 114, 13, 1);
    background: rgba(255, 114, 13, 0.1);
    width: 152rpx;
    height: 70rpx;
    border-radius: 10rpx;
    background-size: 100% auto !important;
    margin: 15rpx 10rpx 15rpx 10rpx;
  }

  .home_fd2_0_c0_c0_c3_c0_c1 {
    background: rgba(244, 244, 244, 1);
    margin: 10rpx 15rpx 10rpx 15rpx;
    border-radius: 10rpx;
    background-size: 100% auto !important;
    width: 150rpx;
    height: 70rpx;
  }

  .home_fd2_0_c0_c0_c3_c0_c0 {
    border: 1px solid rgba(255, 114, 13, 1);
    background: rgba(255, 114, 13, 0.1);
    width: 152rpx;
    height: 70rpx;
    background-size: 100% auto !important;
    border-radius: 10rpx;
    margin: 15rpx 10rpx 15rpx 10rpx;
  }

  .home_fd2_0_c0_c0_c3 {
    padding: 9rpx 31rpx 39rpx 31rpx;
  }

  .home_fd2_0_c0_c0_c2_c2 {
    margin: 38rpx 32rpx 0rpx 32rpx;
  }

  .home_fd2_0_c0_c0_c2_c1_c1_c1 {
    color: #666666;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 28rpx;
    margin: 0rpx 0rpx 0rpx 0rpx;
  }

  .home_fd2_0_c0_c0_c2_c1_c1_c0_c0 {
    margin: 0rpx 32rpx 0rpx 32rpx;
    text-align: center;
  }

  .home_fd2_0_c0_c0_c2_c1_c1_c0 {
    border: 1px solid rgba(224, 224, 224, 1);
    border-radius: 10rpx;
    width: 304rpx;
    height: 80rpx;
  }

  .home_fd2_0_c0_c0_c2_c1_c1 {
    margin: 28rpx 0rpx 0rpx 0rpx;
  }

  .home_fd2_0_c0_c0_c2_c1 {
    margin: 0rpx 32rpx 0rpx 32rpx;
  }

  .home_fd2_0_c0_c0_c2_c0_c1_c0_c1_c0 {
    color: #333333;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 26rpx;
  }

  .home_fd2_0_c0_c0_c2_c0_c1_c0_c1 {
    background: rgba(244, 244, 244, 1);
    margin: 15rpx 10rpx 15rpx 10rpx;
    width: 204rpx;
    height: 70rpx;
    border-radius: 10rpx;
    background-size: 100% auto !important;
  }

  .home_fd2_0_c0_c0_c2_c0_c1_c0_c0_c0 {
    color: #333333;
    font-size: 26rpx;
    font-weight: 500;
    line-height: 26rpx;
  }

  .home_fd2_0_c0_c0_c2_c0_c1_c0_c0 {
    border: 1px solid rgba(255, 114, 13, 1);
    background: rgba(255, 114, 13, 0.1);
    width: 204rpx;
    height: 70rpx;
    border-radius: 10rpx;
    background-size: 100% auto !important;
    margin: 15rpx 10rpx 15rpx 10rpx;
  }

  .home_fd2_0_c0_c0_c2_c0_c1 {
    padding: 13rpx 39rpx 27rpx 39rpx;
  }

  .home_fd2_0_c0_c0_c2_c0_c0 {
    color: #333333;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 30rpx;
    margin: 3rpx 0rpx 0rpx 32rpx;
  }

  .home_fd2_0_c0_c0_c2 {
    padding: 3rpx 0rpx 32rpx 0rpx;
  }

  .home_fd2_0_c0_c0_c1_c1_c1 {
    background: rgba(255, 114, 13, 1);
    border-radius: 10rpx;
    width: 452rpx;
    line-height: 96rpx;
    font-size: 30rpx;
    color: rgba(255, 255, 255, 1);
  }

  .home_fd2_0_c0_c0_c1_c1_c0 {
    background: rgba(244, 244, 244, 1);
    border-radius: 10rpx;
    width: 208rpx;
    line-height: 96rpx;
    font-size: 30rpx;
    color: rgba(51, 51, 51, 1);
  }

  .home_fd2_0_c0_c0_c1_c1 {
    padding: 32rpx 0rpx 32rpx 32rpx;
  }

  .home_fd2_0_c0_c0_c1_c0_c0_c1_c0_c1_c0 {
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-weight: 500;
    line-height: 28rpx;
  }

  .home_fd2_0_c0_c0_c1_c0_c0_c1_c0_c0_c1 {
    width: 30rpx;
    height: 30rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .home_fd2_0_c0_c0_c1_c0_c0_c1_c0_c0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 28rpx;
  }

  .home_fd2_0_c0_c0_c1_c0_c0_c1_c0_c0 {
    padding: 20rpx 0rpx 20rpx 0rpx;
  }

  .home_fd2_0_c0_c0_c1_c0_c0_c1 {
    margin: 0rpx 0rpx 0rpx 34rpx;
    height: 600rpx;
  }

  .home_fd2_0_c0_c0_c1_c0_c0_c0_c0_c1 {
    background: rgba(250, 250, 250, 1);
    width: 198rpx;
    height: 82rpx;
    padding: 0rpx 0rpx 0rpx 32rpx;
    background-size: 100% auto !important;
  }

  .home_fd2_0_c0_c0_c1_c0_c0_c0_c0_c0 {
    background: rgba(255, 255, 255, 1);
    width: 198rpx;
    height: 82rpx;
    padding: 0rpx 0rpx 0rpx 32rpx;
    background-size: 100% auto !important;
  }

  .home_fd2_0_c0_c0_c1_c0_c0_c0 {
    background: rgba(250, 250, 250, 1);
    background-size: 100% auto !important;
  }

  .home_fd2_0_c0_c0_c1_c0_c0 {
    touch-action: none;
    height: 472rpx;
  }

  .home_fd2_0_c0_c0_c1 {
    padding: 0rpx 32rpx 0rpx 0rpx;
  }

  .home_fd2_0_c0_c0_c0_c1_c0 {
    margin: 48rpx 0rpx 0rpx 0rpx;
  }

  .home_fd2_0_c0_c0_c0_c0_c0 {
    color: #333333;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 30rpx;
  }

  .home_fd2_0_c0_c0_c0 {
    padding: 0rpx 32rpx 47rpx 32rpx;
  }

  .home_fd2_0_c0_c0 {
    background: #ffffff;
    width: 750rpx;
  }

  .home_fd2_0_c0 {
    height: 88rpx;
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .home_fd2_0 {
    height: 88rpx;
  }

  .home_fd3_0_c0_c3_c0_c0 {
    width: 68rpx;
    height: 68rpx;
    margin: 0rpx 20rpx 0rpx 0rpx;
    border-radius: 50%;
  }

  .home_fd3_0_c0_c3_c0 {
    color: var(--benbenFontColor1);
    font-size: 32rpx;
  }

  .home_fd3_0_c0_c3 {
    margin: 30rpx 0rpx 10rpx 0rpx;
  }

  .home_fd3_0_c0_c2 {
    border-bottom: 2px solid rgba(249, 249, 249, 1);
    color: rgba(102, 102, 102, 1);
    padding: 0rpx 0rpx 20rpx 0rpx;
  }

  .home_fd3_0_c0_c1_c1 {
    background: rgba(249, 249, 249, 1);
    border-radius: 4rpx;
    height: 46rpx;
    line-height: 46rpx;
    padding: 0rpx 10rpx 0rpx 10rpx;
    color: var(--benbenFontColor1);
    margin: 0rpx 20rpx 0rpx 0rpx;
  }

  .home_fd3_0_c0_c1_c0 {
    background: rgba(58, 167, 161, 0.6);
    border-radius: 4rpx;
    height: 46rpx;
    line-height: 46rpx;
    padding: 0rpx 10rpx 0rpx 10rpx;
    color: #333;
    margin: 0rpx 20rpx 0rpx 0rpx;
  }

  .home_fd3_0_c0_c1 {
    margin: 20rpx 0rpx 20rpx 0rpx;
  }

  .home_fd3_0_c0_c0_c1_c1 {
    color: var(--benbenFontColor1);
  }

  .home_fd3_0_c0_c0_c1_c0 {
    width: 32rpx;
    height: 32rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .home_fd3_0_c0_c0_c0_c1 {
    font-size: 32rpx;
  }

  .home_fd3_0_c0_c0_c0_c0 {
    width: 68rpx;
    height: 32rpx;
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .home_fd3_0_c0 {
    border-radius: 16rpx;
  }

  .home_fd3_0 {
    background: var(--benbenbgColor1);
    padding: 24rpx;
    background-size: 100% auto;
    margin: 10rpx 0rpx 0rpx 0rpx;
  }

  .home_fd4_0_c3 {
    margin: 24rpx 0rpx 0rpx 0rpx;
    color: rgba(119, 119, 119, 1);
  }

  .home_fd4_0_c2 {
    background: #F9F9F9;
    border-radius: 4rpx;
    padding: 10rpx;
  }

  .home_fd4_0_c1_c0 {
    background: #F9F9F9;
    border-radius: 4rpx;
    padding: 10rpx;
    margin: 0rpx 20rpx 0rpx 0rpx;
  }

  .home_fd4_0_c1 {
    margin: 20rpx 0rpx 20rpx 0rpx;
  }

  .home_fd4_0_c0_c1_c1 {
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .home_fd4_0_c0_c1_c0 {
    width: 32rpx;
    height: 32rpx;
  }

  .home_fd4_0_c0_c0_c0_c1 {
    width: 85rpx;
    height: 72rpx;
    position: absolute;
    top: -20rpx;
    left: -20rpx;
  }

  .home_fd4_0_c0_c0_c0_c0 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }

  .home_fd4_0_c0_c0_c0 {
    position: relative;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .home_fd4_0_c0_c0 {
    color: #333;
    font-size: 32rpx;
  }

  .home_fd4_0 {
    background: var(--benbenbgColor1);
    background-size: 100% auto;
    padding: 24rpx;
    margin: 10rpx 0rpx 0rpx 0rpx;
  }

  .home_fd5_0_c3 {
    background: rgba(58, 167, 161, 0.6);
    border-radius: 44rpx;
    width: 466rpx;
    line-height: 64rpx;
    font-size: 28rpx;
    color: #fff;
  }

  .home_fd5_0_c2 {
    background: #4781f5;
    border-radius: 44rpx;
    width: 466rpx;
    line-height: 64rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 42rpx 0rpx 32rpx 0rpx;
  }

  .home_fd5_0_c1 {
    width: 526rpx;
    height: 208rpx;
    border-radius: 16rpx;
  }

  .home_fd5_0_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 700;
    font-style: normal;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .home_fd5_0 {
    background: #FFFFFF;
    border-radius: 16rpx;
    width: 686rpx;
    height: 570rpx;
  }

  .checked_icon {
    color: #dddddd;
    font-size: 36rpx;
    background-color: #fff;
    border-radius: 50%;
    font-weight: 100;
  }

  .myCollection_fd2_0_c0_c0 {
    // position: absolute;
    // right: 15rpx;
    // top: 15rpx;
    width: 80rpx;
    text-align: center;
    // z-index: 5;
  }

  .checked_active {
    color: var(--checked-active);
  }

  .myCollection_fd3_0 {
    padding: 0rpx 24rpx 0rpx 32rpx;
  }

  .myCollection_fd3_0_c0_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 0rpx 0rpx 14rpx;
  }

  .myCollection_fd3_0_c1 {
    background: #f6f6f6;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-size: 24rpx;
    color: #333;
    width: 170rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-weight: 500;
  }

  .myCollection_flex_3 {
    background: #fff;
    width: 750rpx;
    height: 100rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
  }

  .footprint_fd1_0_c0 {
    display: flex;
    align-items: center;
    padding-left: 8rpx;
    margin-bottom: 10rpx;
    height: 50rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #666666;
  }

  .footprint_fd1_0_c1_c0 {
    position: relative;
    width: 246rpx;
    margin: 0rpx 6rpx 28rpx 0rpx;

    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .footprint_fd1_0_c1_c0_c0 {
    width: 246rpx;
    height: 246rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .footprint_fd1_0_c1_c0_c1_c0 {
    width: 100%;
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin: 20rpx 0rpx 14rpx 0rpx;
  }

  .footprint_fd1_0_c1_c0_c1_c1_c1 {
    color: #ff5536;
    font-weight: 600;
  }

  .footprint_price1_fd1_0_c1_c0_c1_c1_c1 {
    font-size: 32rpx;
  }

  .footprint_price2_fd1_0_c1_c0_c1_c1_c1 {
    font-size: 22rpx;
  }

  .footprint_flex_1 {
    padding: 24rpx 0rpx 0rpx 0rpx;
  }
</style>
